<!--/**
 * Plugin Name: 论坛展示型app
 * Description: uloug.com To develop and share! Please keep the copyright information!
 * Author: 拾讯网
 * Author URI: http://www.uloug.com
 * Version: 1.0
 * Plugin URI: https://git.oschina.net/858598758/apicloud.mao10.app.demo.git
 * License: GPL2+
 */-->
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<style>
			.aui-list-view .aui-img-object {
				max-width: 80px;
				height: 80px;
				line-height: 80px;
			}
			.image-list {
				padding-top: 10px;
			}
			.image-list img {
				width: 100%;
			}
			.image-list > div {
				padding-right: 5px;
			}
			.aui-line-x:after {
				border-color: #eee;
			}
			.other-info .aui-line-x {
				margin: 5px 0;
			}
			.other-info p {
				color: #999;
				font-size: 0.75em;
			}
			/**/
			img.loading {
				width: 100%;
				background: url('image/img-fo.gif') no-repeat center center;
				background-color: #fff;
			}
			.aritcle-list-title {
				padding-right: 15px;
			}
			.guo-aritcle-list-dat {
				padding: 14px 0 0 0;
			}
			.guo-aritcle-list-dat > li {
				float: left;
				padding-right: 8px;
				font-size: 12px;
				color: #777575;
			}
			.aui-list-view .aui-img-object {
				max-width: 123.67px;
				height: 80px;
				line-height: 80px;
			}
			.aui-list-view:after {
				border-top: 1px solid rgba(200, 199, 204, 0);
			}
		</style>
	</head>
	<body><!--
	<div id="network"></div>-->
		
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/common_do.js"></script>
	<script type="text/javascript" src="../../script/echo.min.js"></script>
	<script>
		apiready = function() {
			//网络判断
			appnetwork();
		}
		//有网时打开
		function network_yes() {
			//下拉刷新
			var set_Header_html = function(ret, err) {
				loadData(1, true);
				// 第一次加载
				api.refreshHeaderLoadDone();
			};
			api.setCustomRefreshHeaderInfo(set_Header_text, set_Header_html);
			api.refreshHeaderLoading();
			//定义第一次加载
			//上拉加载
			down_refresh();
		}
		
		//下拉刷新
		//@max_page 所有页码
		function down_refresh(max_page) {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				var _page = parseInt($api.getStorage("currentPage"));
				if (_page + 1 <= max_page) {
					loadData(_page + 1, false);
					$api.setStorage("currentPage", _page + 1);
					// 页码+1
				} else {
					alert("没有更多数据了！");
				}
			});
		}

		// 默认设置为第一页
		// 加载数据
		// @currentPage:当前页码
		// @isReload：是否为刷新操作
		function loadData(currentPage, isReload) {
			api.showProgress({
				title : '加载中...',
				modal : false
			});
			var page_size = 10;
			currentPage = isReload ? 1 : currentPage;
			api.ajax({
				url : tic_url_id + tic_url_list + '?page=' + currentPage + "&page_size=" + page_size,
				method : 'get',
				timeout : 30,
				cache : true,
				dataType : 'json',
				returnAll : false
			}, function(ret, err) {
				if (ret) {
					var count = ret.count;
					var posts = ret.posts;
					var max_page = (count - count % page_size) / page_size + 1;
					down_refresh(max_page);
					if (isReload) {
						$api.setStorage("currentPage", 1);
						// 重新设置为1
					};
					//数据填充
					var oja_tic = $api.dom('body');
					var html_tic = '';
					for (var i = 0; i < posts.length; i++) {
						var thisTic = posts[i];
						html_tic += '<div class="aui-content"><ul id="home-article-list" class="aui-list-view"><li class="aui-list-view-cell aui-img" tapmode onclick="article_win(' + thisTic.ID + ')">'
						html_tic += '<img class="aui-img-object aui-pull-right loading" src="http://image.yihaodianimg.com/front-homepage/global/images/blank.gif" data-echo="' + thisTic.fmimg + '">'
						html_tic += '<div class="aui-img-body">'
						html_tic += '<h3 class="aritcle-list-title">' + thisTic.title + '</h3>'
						html_tic += '<ul class="guo-aritcle-list-dat">'
						html_tic += '<li>' + thisTic.userName + '</li>'
						html_tic += '<li>浏览' + thisTic.views + '</li>'
						html_tic += '<li>' + thisTic.time + '</li>'
						html_tic += '</ul></div></li></ul></div>'
					}
					//当前页码为 1
					//填充新数据
					if (currentPage == 1) {
						$api.html(oja_tic, html_tic);
						echoInit();
						//图片延迟加载
						api.hideProgress();
					};
					//当前页码大于 1
					//加载数据到最后一行
					if (currentPage > 1) {
						$api.append(oja_tic, html_tic);
						echoInit();
						//图片延迟加载
						api.hideProgress();
					}
					api.refreshHeaderLoadDone();
				} else {
					network_no();
					api.hideProgress();
				}
			});
		}

		//打开文章内容页
		//@ticiid 文章ID
		function article_win(ticiid) {
			var delay = 0;
			if (api.systemType != 'ios') {
				delay = 300;
			}
			api.openWin({
				name : 'article_win',
				url : 'article_win.html',
				bounces : false,
				delay : delay,
				pageParam : {
					ticiid : ticiid
				},
				slidBackEnabled : true,
				vScrollBarEnabled : false
			});
		}
	</script>
</html>